<template>
    <div class="tab-content">
        <!-- 数据类型选择器 -->
        <div class="data-type-selector">
            <el-tabs v-model="disusedForm.activeDataType" class="chart-data-tabs">
                <el-tab-pane label="年度数据" name="yearly">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>年度弃电利用数据 (12个月)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomDisusedData('yearly')">随机填充</el-button>
                                    <el-button size="small" @click="clearDisusedData('yearly')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>月份</span>
                                <span>弃电利用量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in disusedForm.yearlyData" :key="index" class="table-row">
                                    <div class="table-cell month-cell">
                                        <el-tag type="primary">{{ item.month }}月</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="100000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetDisusedValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="月度数据" name="monthly">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>月度弃电利用数据 (30天)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomDisusedData('monthly')">随机填充</el-button>
                                    <el-button size="small" @click="clearDisusedData('monthly')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>日期</span>
                                <span>弃电利用量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in disusedForm.monthlyData" :key="index" class="table-row">
                                    <div class="table-cell day-cell">
                                        <el-tag type="success">{{ item.day }}日</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="10000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetDisusedValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="日度数据" name="daily">
                    <div class="chart-data-section">
                        <div class="section-header">
                            <h4>日度弃电利用数据 (24小时)</h4>
                            <div class="batch-operations">
                                <el-space>
                                    <el-button size="small" @click="fillRandomDisusedData('daily')">随机填充</el-button>
                                    <el-button size="small" @click="clearDisusedData('daily')">清空数据</el-button>
                                </el-space>
                            </div>
                        </div>
                        <div class="chart-data-table">
                            <div class="table-header">
                                <span>时间</span>
                                <span>弃电利用量 (kWh)</span>
                                <span>操作</span>
                            </div>
                            <div class="table-body">
                                <div v-for="(item, index) in disusedForm.dailyData" :key="index" class="table-row">
                                    <div class="table-cell time-cell">
                                        <el-tag type="warning">{{ String(item.hour).padStart(2, '0') }}:00</el-tag>
                                    </div>
                                    <div class="table-cell value-cell">
                                        <el-input-number v-model="item.value" :min="0" :max="1000" size="small" controls-position="right" />
                                    </div>
                                    <div class="table-cell action-cell">
                                        <el-button size="small" type="text" @click="resetDisusedValue(item)" class="reset-btn">重置</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="save-button-container">
            <el-button type="primary" @click="saveDisusedData">保存弃电利用数据</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { getDataClassifyDetail, updateDataClassify } from '@/api/port'
    import { toRaw } from 'vue'


    // ========================================================================================
    // 模块3: 弃电利用量配置
    // ========================================================================================

    // 弃电利用量图表数据表单
    const disusedForm = ref({
        activeDataType: 'yearly', // 当前选中的数据类型
        // 年度数据 (12个月)
        yearlyData: Array.from({ length: 12 }, (_, i) => ({
            month: i + 1,
            label: `${i + 1}月`,
            value: 0
        })),
        // 月度数据 (30天)
        monthlyData: Array.from({ length: 30 }, (_, i) => ({
            day: i + 1,
            label: `${i + 1}日`,
            value: 0
        })),
        // 日度数据 (24小时)
        dailyData: Array.from({ length: 24 }, (_, i) => ({
            hour: i,
            label: `${i.toString().padStart(2, '0')}:00`,
            value: 0
        }))
    })

    // 保存弃电利用量数据
    const saveDisusedData = async () => {
        await updateDataClassify({
            id: 2,
            key: 'module4',
            value: disusedForm.value
        })
        console.log('保存废弃数据:', toRaw(disusedForm))
        ElMessage.success('废弃数据保存成功')
    }

    // 重置弃电利用量单个数值
    const resetDisusedValue = (item: any) => {
        item.value = 0
        ElMessage.success('数值已重置为0')
    }

    // 随机填充弃电利用量数据
    const fillRandomDisusedData = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                disusedForm.value.yearlyData.forEach(item => {
                    item.value = Math.floor(Math.random() * 50000) + 10000
                })
                break
            case 'monthly':
                disusedForm.value.monthlyData.forEach(item => {
                    item.value = Math.floor(Math.random() * 5000) + 1000
                })
                break
            case 'daily':
                disusedForm.value.dailyData.forEach(item => {
                    item.value = Math.floor(Math.random() * 500) + 100
                })
                break
        }
        ElMessage.success('随机数据填充完成！')
    }

    // 清空弃电利用量数据
    const clearDisusedData = (dataType: string) => {
        switch (dataType) {
            case 'yearly':
                disusedForm.value.yearlyData.forEach(item => {
                    item.value = 0
                })
                break
            case 'monthly':
                disusedForm.value.monthlyData.forEach(item => {
                    item.value = 0
                })
                break
            case 'daily':
                disusedForm.value.dailyData.forEach(item => {
                    item.value = 0
                })
                break
        }
        ElMessage.success('数据已清空！')
    }

    // 初始化数据
    const init = (moduleData: any) => {
        disusedForm.value = moduleData
    }

    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>